<template>
	<view class="common-container login-container flex-column">
		<view class="status_bar"> </view>
		<view class="header-image">
			<image src="../../static/img/logo1.png"></image>
		</view>
		<view class="flex-1">
			<view class="login-form">
				<u--form :model="loginForm" :rules="loginRules" ref="loginForm" labelWidth="0px">
					<u-form-item prop="username" borderBottom>
						<u--input v-model="loginForm.username" border="none" placeholder="请输入手机号或用户名"></u--input>
					</u-form-item>
					<u-form-item prop="password" borderBottom>
						<u-input placeholder="请输入密码" v-model="loginForm.password" name="password"
							:type="showPwd===true?'text':'password'" border="none">
							<template slot="suffix">
								<u-icon :name="showPwd===false?'eye':'eye-fill'" @tap="handleShowPwd"></u-icon>
							</template>
						</u-input>
					</u-form-item>
					<view class='flex-row tool'>
						<view class="flex-1 color-primary" @tap="handleWait">注册账号</view>
						<view class="flex-1 tr color-danger" @tap="handleWait">忘记密码?</view>
					</view>
					<view class="uni-btn-v">
						<u-button @click="handleLogin" type="primary">登录</u-button>
					</view>
					<view class="login-other-method tc">
						<image src="../../static/img/loginType/qq.png" @tap="handleWait"></image>
						<image src="../../static/img/loginType/wx.png" @tap="handleWait"></image>
						<image src="../../static/img/loginType/wxwork.png" @tap="handleWait"></image>
						<image src="../../static/img/loginType/dingding.png" @tap="handleWait"></image>
					</view>
				</u--form>
			</view>
		</view>
		<view class="login-footer tc">
			<view>技术支持：智舰网络工作室</view>
			<view class="name">版权所有：
				<text>Copyright @ 2020-{{year}} 禹城市智舰网络工作室版权所有</text>
			</view>
		</view>


	</view>
</template>
<script>
	export default {
		data() {
			return {
				showPwd: false,
				year: new Date().getFullYear(),
				loading: false,
				loginForm: {
					username: '',
					password: ''
				},
				loginRules: {
					username: {
						type: 'string',
						required: true,
						message: '请输入用户名',
						trigger: ['blur', 'change']
					},
					password: {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
				},
				formRule: [{
						name: "username",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请输入用户名"
					},
					{
						name: "password",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请输入密码"
					}
				]
			}
		},
		onReady() {
			this.$refs.loginForm.setRules(this.loginRules)
		},
		created() {
			var token = uni.getStorageSync(this.$constants.ACCESS_TOKEN)
			if (token) {
				this.getInfo()
			}
		},
		methods: {
			handleShowPwd() {
				this.showPwd = !this.showPwd
			},
			handleLogin() {
				this.$refs.loginForm.validate().then(res => {
					this.$store.dispatch('login', this.loginForm).then((res) => {
						this.getInfo()
					}).catch((err) => {
						console.log(err)
					})
				}).catch(errors => {})
			},
			formSubmit: function(e) {
				var formData = e.detail.value;
				var checkRes = this.$check.check(formData, this.formRule);
				if (checkRes) {
					this.$store.dispatch('login', {
						username: formData.username,
						password: formData.password
					}).then((res) => {
						this.getInfo()
					}).catch((err) => {
						console.log(err)
					})
				} else {
					this.$tip.toast(this.$check.error)
				}
			},
			getInfo() {
				this.$store.dispatch('getUserInfo').then((res) => {
					this.$tip.success("登陆成功!")
					console.log(res)
					uni.switchTab({
						url: '/pages/message/index'
					});
				}).catch((_) => {})
			},
			handleWait() {
				this.$tip.alert("敬请期待!")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-container {
		.title {
			font-size: 25px;
			font-weight: bold;
		}

		.header-image {
			text-align: center;

			uni-image {
				width: 180px;
				height: 180px;
				margin-top: 10px;
			}
		}

		.login-form {
			margin: 50px 20px 0 20px;
			padding: 0 20px;
			background-color: #FFFFFF;
			border-radius: 10px;

			.u-form {
				padding: 25px 10px;
				width: calc(100% - 30px);
			}

			.tool {
				margin: 10px 0px;
				color: grey;
				font-size: 12px;
			}

			.login-other-method {
				margin-top: 15px;

				uni-image {
					width: 28px;
					height: 28px;
					margin: 0 10px;
				}
			}
		}

		.login-footer {
			height: 82px;
			margin-bottom: 10px;
			font-size: 12px;
			color: #4a4e4e;
			line-height: 25px;
		}
	}
</style>